import { Breadcrumb } from 'antd';
import { Link, useLocation } from 'umi';

interface IBreadcrumbItem{
    path: string;
    breadcrumbName: string;
}
const BreadCrumbs: React.FC = ()=>{
    const location = useLocation();
    const routes:IBreadcrumbItem[] = location.pathname.split('/').filter(item=>item).map(item=>{
        return {
            path: `/${item}`,
            breadcrumbName: item
        }
    })
    function itemRender(route: IBreadcrumbItem, params: {}, routes: IBreadcrumbItem[], paths: string[]) {
        const last = routes.indexOf(route) === 0;
        return last ? (
          <span>{route.breadcrumbName}</span>
        ) : (
          <Link to={paths.splice(1).join('/')}>{route.breadcrumbName}</Link>
        );
      }
      console.dir(itemRender)
    return <Breadcrumb itemRender={itemRender} routes={routes} />;
}

export default BreadCrumbs;